<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单数据提交</title>
	</head>
	<body>
		<div id="app">
			<form action="http://www.baidu.com">
				<div>
					<span>用户名:</span>
					<span>
						<input name="username" type="text" v-model="username"/>
					</span>
				</div>
				<div>
					<span>性别:</span>
					<span>
						<!--label相当于合并一个div 需要id-for进行关联  -->
						<input name="gender" type="radio" value="男" id="man"
						v-model="gender"/>
						<label for="man">男</label>
						<input name="gender" type="radio" value="女" id="women"
						v-model="gender"/>
						<label for="women">女</label>
					</span>
				</div>
				
				<div>
					<span>爱好:</span>
					<span>
						<input name="hobbys" type="checkbox" value="敲代码" v-model="hobbys"/>敲代码
						<input name="hobbys" type="checkbox" value="打游戏" v-model="hobbys"/>打游戏
						<input name="hobbys" type="checkbox" value="喝水" v-model="hobbys"/>喝水
					</span>
				</div>
				
				<div>
					<span>部门:</span>
					<span>
						<!-- 设定下拉框多选 multiple="true"-->
						<select name="dept" v-model="dept" 
							multiple="true">
							<option value="财务部">财务部</option>
							<option value="研发部">研发部</option>
							<option value="测试部">测试部</option>
						</select>
					</span>
				</div>
				<div>
					<span>用户详情</span>
					<span>
						文本域
					</span>
				</div>
				<div>
					<!-- 让默认的行为失效 -->
					<button @click.prevent="submit">提交</button>
				</div>
			</form>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					username: '',
					gender: '女',
					//如果数据项有多项 则使用数组接收
					hobbys: ['敲代码','喝水'],
					//定义下拉框 如果单个数据使用'' 多个数据使用数组
					//dept: '研发部'
					dept: ['财务部','研发部']
				},
				methods: {
					submit(){
						console.log("username数据:"+this.username)
						console.log("username数据:"+this.gender)
					}
				}
			})
		</script>
	</body>
</html>
